{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import google_play_button, apple_app_store_button with context %}
{% from "macros-protocol.html" import split, callout_compact with context %}

{% extends "firefox/base/base-protocol.html" %}

{% set addon_url = "https://addons.mozilla.org/firefox/addon/facebook-container/?src=external-www.mozilla.org-facebookcontainer&utm_source=www.mozilla.org-facebookcontainer&utm_medium=referral" %}

{% block page_title %}{{ ftl('facebook-container-facebook-container-for-firefox') }}{% endblock %}
{% block page_desc %}{{ ftl('facebook-container-millions-of-people-around') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-split')}}
  {{ css_bundle('protocol-card')}}
  {{ css_bundle('protocol-callout')}}
  {{ css_bundle('firefox_facebook_container') }}
{% endblock %}

{% block sub_navigation %}
  {% include 'firefox/includes/sub-nav-firefox.html' %}
{% endblock %}

{% block content %}
<main>
  {% call split(
    block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace',
    theme_class='mzp-t-dark',
    media_class='mzp-l-split-h-center',
    media_include='firefox/facebookcontainer/includes/video.html',
    media_after=True,
    ) %}
    <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox">{{ ftl('facebook-container-brand-name-firefox-browser') }}</div>
    <h1 class="mzp-u-title-lg">{{ ftl('facebook-container-facebook-well-contained-keep') }}</h1>

    <p class="extension-cta" data-testid="get-extension-link">
      <a class="mzp-c-cta-link" href="{{ addon_url }}">{{ ftl('facebook-container-get-the-facebook-container') }}</a>
    </p>

    <div class="firefox-cta">
      <p>{{ ftl('facebook-container-download-firefox-and-get-the') }}</p>
      {{ download_firefox(alt_copy=ftl('download-button-download-firefox'), dom_id="download-firefox-cta") }}
    </div>

    <div class="mobile-cta">
        <p>{{ ftl('facebook-container-only-available-for-desktop') }}</p>
        <p>{{ ftl('facebook-container-visit-to-get-for-desktop', url="https://www.firefox.com/?redirect_source=mozilla-org", link_copy='www.firefox.com') }}</p>

      {% if ftl_has_messages('facebook-container-get-firefox-android-ios') %}
        <p>{{ ftl('facebook-container-get-firefox-android-ios') }}</p>

        <ul>
          <li>
            {{ google_play_button(href=play_store_url('firefox', 'firefox-facebook-container'), id='playStoreLink') }}
          </li>
          <li>
            {{ apple_app_store_button(href=app_store_url('firefox', 'firefox-facebook-container'), id='appStoreLink') }}
          </li>
        </ul>
      {% endif %}
    </div>
  {% endcall %}

  <section class="mzp-l-content mzp-l-card-third">
    <div class="mzp-c-card">
      <h3 class="mzp-c-card-title">{{ ftl('facebook-container-opt-out-on-your-terms') }}</h3>
      <p>
      {{ ftl('facebook-container-facebook-can-track-almost', fbcontainer=addon_url) }}
      </p>
    </div>
    <div class="mzp-c-card">
      <h3 class="mzp-c-card-title">{{ ftl('facebook-container-install-and-contain') }}</h3>
      <p>
      {{ ftl('facebook-container-installing-the-extension-is', fbcontainer=addon_url) }}
      </p>
    </div>
    <div class="mzp-c-card">
      <h3 class="mzp-c-card-title">{{ ftl('facebook-container-about-firefox-and-mozilla') }}</h3>
      <p>
      {{ ftl('facebook-container-were-backed-by-mozilla-the', mozilla=url('mozorg.home')) }}
      </p>
    </div>
  </section>

  <section class="firefox-cta">
    {% call callout_compact(
      title=ftl('facebook-container-browse-freely-with-firefox'),
      class='mzp-t-dark',
      heading_level=2,
      brand=True,
      brand_product='firefox',
      brand_type='logo',
      brand_size='lg')
    %}
    {{ download_firefox(alt_copy=ftl('download-button-download-now'), dom_id="download-firefox-today") }}
    {% endcall %}
  </section>
</main>
{% endblock %}

{% block js %}
  {% if LANG == "de" %}
    {{ js_bundle('video-inline-embed') }}
  {% else %}
    {{ js_bundle('data_videoengagement') }}
  {% endif %}
{% endblock %}
